<template>
  <div class="system">
    <el-main>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="分类管理" name="first">
          <el-button
            type="primary"
            v-if="is_admin_view == 0"
            @click="dialogVisible = true"
            >添加一级分类</el-button
          >
          <el-table
            :data="tableData"
            style="width: 80%; margin-top: 20px"
            row-key="id"
            border
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          >
            <el-table-column prop="label" label="名称"> </el-table-column>
            <el-table-column prop="level" label="级别"> </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button @click="exit(scope.row)" type="primary"
                  >修改</el-button>
                <el-button
                  @click="addTow(scope.row.id)"
                  v-if="scope.row.level == 1"
                  type="primary"
                  >添加二级分类</el-button>
                <el-button
                  @click="addThree(scope.row.id)"
                  v-if="scope.row.level == 2"
                  type="primary"
                  >添加三级分类</el-button
                >
                <el-button @click="Delete(scope.row.id)" type="danger"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="访客管理" name="second">
          <el-button
            type="primary"
            v-if="is_admin_view == 0"
            @click="visitorVisibleBtn"
            >创建访客</el-button
          >
          <el-table
            :data="visitorData"
            style="width: 80%; margin-top: 20px"
            border
          >
            <el-table-column prop="name" label="访客姓名"> </el-table-column>
            <el-table-column prop="mobile" label="访客电话"> </el-table-column>
            <el-table-column prop="create_time" label="创建时间"> </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button @click="visitorVisibleExit(scope.row.id)" type="primary"
                  >修改</el-button
                >
                <el-button @click="DeleteVisitor(scope.row.id)" type="danger"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-main>
    <el-dialog
      :close-on-click-modal="false"
      title="添加一级分类"
      :visible.sync="dialogVisible"
      @close="cancleVisible"
      width="40%"
      :before-close="handleClose"
    >
      <el-input v-model="oneVisib" placeholder="请输入分类"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button type="button" class="pubBtn2" @click="cancleVisible"
          >关闭</el-button
        >
        <el-button type="primary" @click="save">保存</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      title="添加二级分类"
      :visible.sync="TowVisible"
      width="40%"
      :before-close="handleClose"
    >
      <el-input v-model="twoVisib" placeholder="请输入分类"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button type="button" class="pubBtn2" @click="TowVisible = false"
          >关闭</el-button
        >
        <el-button type="primary" @click="saveTow">保存</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      title="添加三级分类"
      :visible.sync="ThreeVisible"
      width="40%"
      :before-close="handleClose"
    >
      <el-input v-model="threeVisib" placeholder="请输入分类"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button type="button" class="pubBtn2" @click="ThreeVisible = false"
          >关闭</el-button
        >
        <el-button type="primary" @click="saveThree">保存</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      :title="`修改${label}级分类`"
      :visible.sync="exitVisible"
      width="40%"
      :before-close="exithandleClose"
    >
      <el-input v-model="exitVal" placeholder="请输入分类"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button type="button" class="pubBtn2" @click="exitVisible = false"
          >关闭</el-button
        >
        <el-button type="primary" @click="saveExit">保存</el-button>
      </span>
    </el-dialog>
    <el-dialog
      @close="closeVisitor('form')"
      center
      :close-on-click-modal="false"
      :destroy-on-close="true"
      :title="visitorTitle"
      :visible.sync="visitorVisible"
      width="40%"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item prop="name" label="访客姓名">
          <el-input v-model="form.name" placeholder="请输入访客姓名"></el-input>
        </el-form-item>
        <el-form-item prop="mobile" label="访客电话">
          <el-input v-model="form.mobile" placeholder="请输入访客电话"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="button" class="pubBtn2" @click="cancleVisitor('form')"
          >取消操作</el-button
        >
        <el-button type="primary"  @click="saveVisitor('form')">{{visitorTitle=="创建访客"?"确定创建":"确定修改"}}</el-button>
      </span>
    </el-dialog>
     <Service />
  </div>
</template>

<script>
import {
  patentCreate,
  patentGet,
  patentCate,
  getChild,
  patentDelete,
  patentUpdate,
  getOneCate,
  visitorIndex,
  addVisitor,
  editVisitor,
  getVisitorInfo,
  delVisitorInfo
} from "@/api/user";
import { mapGetters } from "vuex";
import Service from "@/components/Service";

export default {
   components: {
    Service,
  },
  data() {
    return {
      tableData: [],
      visitorData:[],
      dialogVisible: false,
      TowVisible: false,
      ThreeVisible: false,
      exitVisible: false,
      exitId: "",
      oneVisib: "",
      twoVisib: "",
      threeVisib: "",
      Towid: "",
      Threeid: "",
      exitid: "",
      exitVal: "",
      label: "",
      row: [],
      activeName: "first",
      visitorVisible: false,
      visitorTitle:"",
      form:{
        id:'',
        name:'',
        mobile:''
      }
    };
  },
  computed: {
    ...mapGetters([
      "sidebar",
      "avatar",
      "name",
      "roles",
      "type",
      "is_admin_view",
      "rid",
    ]),
  },
  mounted() {
    // this.getList();
    this.patentCate();
  },
  methods: {
    cancle() {
      this.dialogVisible = false;
    },
    addStep() {},
    async saveThree() {
      try {
        await patentCreate({ pid: this.Threeid, name: this.threeVisib });
        this.patentCate();
        this.ThreeVisible = false;
        this.Threeid = "";
        this.$message.success("添加三级分类成功");
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    async saveTow() {
      try {
        await patentCreate({ pid: this.Towid, name: this.twoVisib });
        this.patentCate();
        this.TowVisible = false;
        this.Towid = "";
        this.$message.success("添加二级分类成功");
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    cancleVisible() {
      this.oneVisib = "";
      this.dialogVisible = false;
    },
    async save(index) {
      try {
        await patentCreate({ id: 0, name: this.oneVisib });
        this.patentCate();
        this.dialogVisible = false;
        this.oneVisib = "";
        this.$message.success("添加一级分类成功");
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    async getList() {
      try {
        const res = await patentGet();
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    async patentCate() {
      const res = await patentCate();
      const visitor = await visitorIndex();
      this.tableData = res.tableData;
      this.visitorData = visitor.list;


    },
    handleClose() {
      // this.setpArr.exitId = ''
      this.dialogVisible = false;
      this.TowVisible = false;
      this.ThreeVisible = false;
    },
    exithandleClose() {
      this.exitVisible = false;
    },
    async Delete(id) {
      // console.log(id)
      this.$confirm("确定删除分类吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          try {
            const res = await patentDelete({ id: id });
            this.patentCate();
            this.$message.success("删除成功");
          } catch (e) {
            this.$message.error(e.message);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    async addTow(id) {
      // console.log(id)
      try {
        this.TowVisible = true;
        this.Towid = id;
      } catch (e) {
        this.$message.error(e.message);
      }
    },

    addThree(id) {
      try {
        this.ThreeVisible = true;
        this.Threeid = id;
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    async exit(row) {
      this.exitVal = row.label;
      this.exitVisible = true;
      this.exitid = row.id;
      this.label = row.level;
    },
    async saveExit(id) {
      try {
        await patentUpdate({ id: this.exitid, name: this.exitVal });
        this.exitid = "";
        this.exitVisible = false;
        this.exitVal = "";
        this.patentCate();
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    handleClick(tab, event) {
      // console.log(tab, event);
    },
    visitorhandleClose(){

    },
    cancleVisitor(formName){
       this.visitorVisible = false;
      this.$refs[formName].resetFields();
       this.form = {
            name:"",
            mobile:''
          }
    },
    closeVisitor(formName){
      this.visitorVisible = false;
      this.$refs[formName].resetFields();
       this.form = {
            name:"",
            mobile:''
          }
    },
    visitorVisibleBtn(){
      this.visitorTitle = "创建访客";
      this.visitorVisible = true
    },
    async visitorVisibleExit(id){
      try {
        this.form = await getVisitorInfo({visitor_id:id})
        this.visitorTitle = "修改访客";
        this.visitorVisible = true;
      } catch (error) {
         this.$message.error(error.message);
      }
    },
    async DeleteVisitor(id){
      try {
         this.$confirm('确定删除访客吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          await delVisitorInfo({visitor_id:id})
          this.patentCate()
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

      } catch (error) {
         this.$message.error(error.message);
      }
    },
    async saveVisitor(formName){
    try {
        if(this.visitorTitle == "创建访客"){
          await addVisitor({
            name:this.form.name,
            mobile:this.form.mobile,
          })
          this.patentCate()
          this.$message.success("创建成功");
          this.visitorVisible = false;
          this.$refs[formName].resetFields();
        }else{
          await editVisitor({
            visitor_id:this.form.id,
            name:this.form.name,
            mobile:this.form.mobile,
          })
          this.patentCate()
          this.$message.success("修改成功");
          this.visitorVisible = false;
          this.$refs[formName].resetFields();
          this.form = {
            name:"",
            mobile:''
          }
        }
    } catch (error) {
      this.$message.error(error.message);
    }

    }
  },
};
</script>

<style scoped lang="less">
.invoice-list {
  // border: 1px solid #ebeef5;
  margin-top: 10px;

  .invoice-header {
    background-color: #f8f8f9;
    display: flex;

    // padding-left: 46px;
    // border-bottom: 1px solid #ebeef5;
    .invoice-item {
      padding: 10px 0;
      padding-right: 0;
      flex: 1;
      // border-left: 1px solid #ebeef5;
      padding-left: 10px;
    }
  }

  .el-tree-node__content {
    // background: #f2f2f2;
    padding-left: 0 !important;
    height: 40px;
    // border-bottom:1px solid #ebeef5;
  }

  .el-tree-node__children {
    .el-tree-node__content {
      background: #fff;
      // border-bottom: 1px solid #ebeef5;
    }
  }

  .custom-tree-node {
    width: 100%;
    height: 100%;
    border-bottom: 1px solid #ebeef5;

    .total_info_box {
      background: #f2f2f2;
      line-height: 40px;

      span {
        float: left;
        font-size: 12px;
        margin: 0 15px;
        // i{
        //   display: inline-block;
        //   margin-right: 3px;
        // }
      }
    }

    .table_info_node {
      display: flex;
      height: 100%;

      .table_info_item {
        flex: 1;
        height: 100%;
        // border-left: 1px solid #ebeef5;
        padding: 10px 0px;
        line-height: 40px;
        padding-left: 10px;
      }
    }
  }
}

.el-icon-remove-outline,
.el-icon-circle-plus-outline {
  font-size: 20px;
}

.towTitle {
  padding-left: 20px;
}
.threeTitle {
  padding-left: 40px;
}

.table_box {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  .table_info_item {
    // flex: 1;
    width: 33%;
    margin-top: 20px;
  }
}
</style>
